<template>
   <div class="app-container">


            <!--查询表单-->
      <div class="search-div">
         <el-form label-width="70px" size="small">
         <el-row>
            <el-col :span="8">
               <el-form-item label="关键字">
               <el-input style="width: 100%" v-model="searchObj.keyword" placeholder="课程名称/用户名称" clearable></el-input>
               </el-form-item>
            </el-col>

            <el-col :span="6">
            <el-form-item label="课程">
              <template>
                <el-select
                  v-model="searchObj.courseId"
                  placeholder="请选择"
                  style="margin-right: 10px; width: 80%"
                >
                  <el-option
                    v-for="item in courseList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
      

         </el-row>
         <el-row style="display:flex">
            <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
         </el-row>
         </el-form>
      </div>

      <!-- 工具条 -->
      <div class="tools-div">
         <!-- <el-button type="success" icon="el-icon-plus" size="mini" @click="add" :disabled="$hasBP('bnt.sysCourseComment.add')  === false">添 加</el-button> -->
         <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
       
         <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
      </div>

    

   
    <div class="app-container">
      <!-- 表格 -->
         <el-table
               v-loading="listLoading"
               :data="list"
               stripe
               border
               @selection-change="handleSelectionChange"
               style="width: 100%;margin-top: 10px;">

               <el-table-column type="selection"/>

               <el-table-column
               label="序号"
               width="70"
               align="center">
               <template slot-scope="scope">
                  {{ (page - 1) * limit + scope.$index + 1 }}
               </template>
               </el-table-column>

               <el-table-column prop="param.name" label="课程名称" />
               <el-table-column prop="content" label="评论内容" />
               <el-table-column prop="param.username" label="学员名称" />
               <el-table-column prop="createTime" label="创建时间"/>
               <el-table-column prop="updateTime" label="更新时间"/>
               <el-table-column label="操作" width="200" align="center">
               <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
                  <!-- <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)" title="分配权限"/> -->
               </template>
               </el-table-column>
            </el-table>
       </div>

      <!-- 分页组件 -->
      <el-pagination
    :current-page="page"
    :total="total"
    :page-size="limit"
    style="padding: 30px 0; text-align: center;"
    layout="total, prev, pager, next, jumper"
    @current-change="fetchData"
  />

<!-- 添加 /修改  根据是否有id,进行判断。-->
  <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="dataForm" :model="sysCourseComment" label-width="150px" size="small" style="padding-right: 40px;">
        <el-form-item label="课程名称">
            <el-select v-model="sysCourseComment.courseId"  placeholder="课程名称">
              <el-option
                v-for="item in courseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名称">
          <el-select v-model="sysCourseComment.userId"  placeholder="教师名称">
              <el-option
                v-for="item in studentList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
        </el-form-item>
      <el-form-item label="评论内容">
          <el-input v-model="sysCourseComment.content"/>
      </el-form-item>
      <el-form-item label="创建时间" v-if="sysCourseComment.id">
          <el-input v-model="sysCourseComment.createTime" disabled/>
      </el-form-item>
      <el-form-item label="修改时间" v-if="sysCourseComment.id">
          <el-input v-model="sysCourseComment.updateTime" disabled/>
      </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
</el-dialog>


   </div>
</template>


<script>
// 引入 role.js  
import api from '@/api/sysComment/comment.js'

import courseApi from '@/api/sysCourse/course.js'
import userApi from '@/api/user/user.js'


export default {
   data() {
      return {
         // 定义table的数据源、变量
         list:[],
         // 控制菊花展示true 或者 隐藏 fasle
         listLoading:true,
         // 当前页码
         page:1,
         // 每页条数
         limit:5,
         // 总记录条数
         total:0,
         // 搜索条件
         searchObj:{},
        // 控制弹窗的展示或隐藏 
          dialogVisible:false,
        // 传递的数据对象
          sysCourseComment:{},
        // 选中的数据
          selectValueData:[],
         //  课程列表
         courseList:[],
         //  studentlist
         studentList:[],
         teacherList:[],//老师
      }
   },
   created() {
      this.fetchData();
      this.fetchCourseList();
      this.fetchStudentList();
      this.fetchTeacherList();
   },
   methods:{

        // 是否撤回
    switchStatus(row) {
      // 如果 可用  设置为 不可用  如果不可用  设置为 可用
      row.status = row.status === 1 ? 0 : 1;
      api.updateStatus(row.id, row.status).then((response) => {
        //a.给出提示
        this.$message.success(response.message || "撤回成功");
        //b.再次刷新列表
        this.fetchData();
      });
    },

   // 查询所有的老师
   fetchTeacherList() {
      userApi.findTeacher().then((res) => {
        this.teacherList = res.data;
      });
    },

   // 查询所有的Student
   fetchStudentList() {
      userApi.findStudent().then((res) => {
        this.studentList = res.data;
      });
    },

   // 查询全部课程
    fetchCourseList() {
      courseApi.findAll().then((res) => {
        this.courseList = res.data;
      });
    },

    // 5、批量删除
    batchRemove(){
      // 判断是否有选中select
      if(this.selectValueData.length==0)
      {
         this.$message.warning('请选择要删除的记录！')
        return;
      }
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var ids=[];
        for(var i=0;i<this.selectValueData.length;i++)
        {
          var obj= this.selectValueData[i];
          // 获取id值
          var id = obj.id;
          // 将id放进到数组中
         ids.push(id);
        }
        api.batchremoveId(ids)
          .then((response) => {
          // 提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 刷新页面
          this.fetchData();
        });
      });
    },
    handleSelectionChange(selectValue){
    //  console.log(selectValue);
     this.selectValueData= selectValue;
    },
   

      // 4、根据单个id,删除
       // 删除操作
    removeDataById(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
         // a.发送请求
        api.removeId(id)
          .then((res) => {
          // 提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // b.刷新页面
          this.fetchData();
        });
      });
    },
    
      //3、添加  +  修改

      // 根据id去回显角色信息
      edit(id){
        // 先查看是否有收到id
        // alert(id);

        // a.发送请求
        api.getCourseCommentById(id).then(res=>{
          // 查看显示数据
          // console.log(res);
          this.sysCourseComment=res.data;
           // c、打开弹框true
           this.dialogVisible=true;
        })
      },

      updateCourseComment(){
            // a、发送请求
            api.updateCourseComment(this.sysCourseComment).then(res=>{
              // console.log(res);
            // b、给出修改提示
            this.$message({
              type:'success',
              message:"修改成功！",
            })
            // c、关闭弹框
            this.dialogVisible=false;
            
            // d、再次刷新列表
            this.fetchData();
          })
        },

        //添加或者修改 具体功能
        saveOrUpdate(){
          if(this.sysCourseComment.id!=null){
            this.updateCourseComment();
          }else{
            this.addCourseComment();
          }
        },
        //实现添加功能
        addCourseComment(){
          api.saveCourseComment(this.sysCourseComment)
          .then(Response=>{
            this.$message({
              type:'success',
              message:"添加成功！",
            });
            // 一样的效果
            // this.$message.success('添加成功！');
            // 关闭弹框
            this.dialogVisible=false;
            // 刷新数据
            this.fetchData();
          })
        },
          //打开弹框
        add(){
          // 当打开弹框之前，清空文本框所有数据  
            this.sysCourseComment={};
            this.dialogVisible=true
          },

      // 2、重置
         resetData(){
            // 清空搜索条件
            this.searchObj={};
            // 再次刷新列表
            this.fetchData();
         },
      // 1、查找
         fetchData(page=1){
          this.page = page;
            // console.log(this.limit);
            console.log(this.page);
            api.getCourseCommentList(this.page,this.limit,this.searchObj).then(res=>{
               // 输出结果查看 
               // console.log(res);
               // 隐藏菊花展示
               this.listLoading=false;
               this.list=res.data.records;
               this.total=res.data.total;
            })
         }
   },
   
}
</script>

<style>

</style>